<template>
  <div class="template-index-Lu">
    <commpVxeTable
          :isCanWrap="true"
          :conditionBtnRow="true"
          :key="reCommpVxeTable"
          :config="dataTableConfig"
          :columns="columnsVxe"
          :formItem="formItem"
          @checkboxChange="checkboxChange"
          ref="administrativeOffice"
          @searchEvent="searchEvent"
          @resetEvent="resetEvent"
          >
          <template v-slot:externalOperations="{data}"  >
              <vxe-form-item>
                  <template>
                      <a-button class="blue-btn" @click="reviseClick({},false)" icon="plus">新增技术职称</a-button>
                  </template>
              </vxe-form-item>
              <vxe-form-item>
                  <template>
                      <a-button class="blue-btn" @click="downloadClick" icon="vertical-align-bottom">下载模板</a-button>
                  </template>
              </vxe-form-item>
              <vxe-form-item>
                  <template>
                    <a-upload :showUploadList="false" style="display: inline-block;" :beforeUpload="beforeUpload" action="" @change="importClick">
                        <a-button class="blue-btn" type="default"  icon="import">导入</a-button>
                    </a-upload>
                  </template>
              </vxe-form-item>
              <vxe-form-item>
                  <template>
                      <a-button class="blue-btn" @click="exportClick" icon="export">导出</a-button>
                  </template>
              </vxe-form-item>
          </template>
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
              <a-form layout="inline">
                  <a-form-item>
                      <a-button class="green-btn" @click="reviseClick(row,true)" icon="eye">查看</a-button>
                  </a-form-item>
                  <a-form-item>
                      <a-button class="blue-btn" @click="reviseClick(row,false)" icon="edit">编辑</a-button>
                  </a-form-item>
                  <a-form-item>
                    <a-button class="red-btn" @click="deletehandle(row)" icon="delete">删除</a-button>
                  </a-form-item>
              </a-form>
          </template>
      </commpVxeTable>
      <increase ref="increaseRef" @success="success"></increase>
  </div>
</template>
<script>
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import  assessCheckApi  from './service/api'
import increase from './increase.vue'
import { deleteTitle,exportZckData,impZckData,downZcTemplate } from './service/index'
import blobType from '@/common/blobType'
export default {
  components: {
      commpVxeTable,increase
  },
  data() {
    return {
          reCommpVxeTable: '',
          dataTableConfig: {
              api: assessCheckApi.pageList,
              rowId: 'id',
              paramet: {}
          },
          columnsVxe: [
              {
                  type: 'checkbox',
                  width: 60,
                  fixed: 'left'
              },{
                  title: '序号',
                  field: 'forder',
                  width: 50,
              },{
                  title: '职称系列类型1',
                  field: 'fzcxllx1',
              },{
                  title: '职称系列类型2',
                  field: 'fzcxllx2',
              },{
                  title: '专业技术资格',
                  field: 'fzyjszg',
              },{
                  title: '级别',
                  field: 'fjb',
                  width: 100,
              },{
                  title: '操作',
                  field: 'jobid',
                  fixed: 'right',
                  width: 280,
                  titleInterval:true,
                  slots: {
                  // 使用插槽模板渲染
                      header:'data2_header',
                      default: 'operation_btn',
                  },
              }
          ],
          formItem: [
              {
                  label: '职称系列类型1',
                  model: 'fzcxllx1',
              },{
                  label: '职称系列类型2',
                  model: 'fzcxllx2',
              },{
                  label: '专业技术资格',
                  model: 'fzyjszg',
              },{
                  label: '级别',
                  model: 'fjb',
              },
          ],
          idList: [],
          formData: {},
      }
  },
  methods: {
      // 勾选
      checkboxChange(val){
          //console.log('已选择',val)
          this.idList = []
          if(val.length){
              val.forEach(item => {
                  this.idList.push(item.id)
              });
          }
      },
      // 搜索
      searchEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      // 重置
      resetEvent(){
          //console.log('重置')
          this.reCommpVxeTable = Date.now()
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      downloadPdf(href){
        window.open(href,'_blank')
      },
      reviseClick(row,isview){
        //console.log(row)
        this.$nextTick(() => {
          this.$refs.increaseRef.getData(row,isview)
          this.$refs.increaseRef.increaseVisible = true
        })
      },
      downloadClick(){
        var that = this
        var fileName = '技术职称模板表'
        downZcTemplate().then((data) => {
            if (!data) {
                that.$message.warning('文件下载失败')
                return
            }
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
            } else {
                let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName + '.xls')
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
            }
          })
      },
      deletehandle(row){
        var that = this
        that.$confirm({
          title: '您确定要删除当前技术职称吗?',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            deleteTitle({id: row.id}).then(res => {
              //console.log(res)
              if(res.code == 200){
                that.reCommpVxeTable = Date.now()
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
      beforeUpload(e){
          return false
      },
      importClick({file}){
        var that = this
        if(typeof file.uid !== 'undefined') {
            if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
                const fileData = new FormData();
                fileData.append("file",file);
                impZckData(fileData).then(res => {
                    if(res.success){
                      that.reCommpVxeTable = Date.now()
                      that.$message.success(res.message)
                    } else {
                      that.$message.warning(res.message)
                    }
                })
            }
        }
      },
      exportClick(){
        var that = this
        that.$confirm({
          title: '默认全部导出，您确定要导出当前所有技术职称吗?',
          content: '',
          okText: '确定',
          okType: 'info',
          cancelText: '取消',
          onOk() {
            var fileName = '技术职称表'

            exportZckData().then((data) => {
              if (!data) {
                that.$message.warning('文件下载失败')
                return
              }
              if (typeof window.navigator.msSaveBlob !== 'undefined') {
                window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
              } else {
                let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName + '.xls')
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
    // 弹窗关闭
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.resetEvent()
      this.idList = []
    },
  },
}
</script>
